<template>
  <view>
    <!-- 顶部选项卡 -->
    <!--scroll-into-view="scrollInto" 值应为某子元素id（id不能以数字开头）。 -->
    <scroll-view
      scroll-x
      class="scroll-row border-bottom border-white"
      :scroll-into-view="scrollInto"
      style="height: 100rpx"
    >
      <view
        v-for="(item, index) in tabBars"
        :key="index"
        class="scroll-row-item px-35 py-3 font-ld"
        :id="'tab' + index"
        :class="tabIndex === index ? 'text-main font-lg font-weight-bold' : ''"
        @click="changeTab(index)"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <swiper
      class="swiper"
      :duration="500"
      :current="tabIndex"
      @change="onChangeTab"
      circular
      :style="'height:' + scrollH + 'px;'"
    >
      <swiper-item v-for="(item, index) in newsList" :key="index">
        <scroll-view
          scroll-y="true"
          :style="'height:' + scrollH + 'px;'"
          @scrolltolower="loadmore(index)"
        >
          <!-- 如果数组有数据直接显示 -->
          <template v-if="item.list.length > 0">
            <block v-for="(item2, index2) in item.list" :key="index2">
              <!-- 列表样式  -->
              <common-list
                :item="item2"
                :index="index2"
                @follow="follow"
                @doSupport="doSupport"
              ></common-list>
              <divider></divider>
            </block>
            <!-- 上拉加载 scroll-view就是我们的内容区域-->
            <load-more :loadmore="item.loadmore"></load-more>
          </template>
          <!-- 如果数组没数据提示暂无数据 -->
          <template v-else>
            <!-- 全局封装main.js-->
            <no-thing></no-thing>
          </template>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
const demo = [
  {
    username: "昵称",
    userpic: "/static/topboy.png", //头像
    newstime: "2020-12-10下午4.30", //时间
    isFollow: false, //判断当前用户是否已经关注
    title: "我是标题", //标题
    titlepic: "/static/demo/d524b2c83a0460a0556117a96f37b6f.png", //标题下的图片
    support: {
      // 点赞 反赞
      type: "",
      support_count: 0,
      unsupport_count: 0,
    },
    // 评论
    comment_count: 0,
    // 分享
    share_num: 0,
  },
  {
    username: "昵称",
    userpic: "/static/topboy.png", //头像
    newstime: "2020-12-10下午4.30", //时间
    isFollow: false,
    title: "我是标题", //标题
    titlepic: "", //标题下的图片
    support: {
      // 点赞 反赞
      type: "", //如果type=support就是点赞 动态添加class type=unsupport就是踩 动态添加class
      support_count: 0,
      unsupport_count: 2,
    },
    // 评论
    comment_count: 2,
    // 分享
    share_num: 2,
  },
  {
    username: "昵称",
    userpic: "/static/topboy.png", //头像
    newstime: "2020-12-10下午4.30", //时间
    isFollow: false,
    title: "我是标题", //标题
    titlepic: "", //标题下的图片
    support: {
      // 点赞 反赞
      type: "", //如果type=support就是点赞 动态添加class type=unsupport就是踩 动态添加class
      support_count: 0,
      unsupport_count: 2,
    },
    // 评论
    comment_count: 2,
    // 分享
    share_num: 2,
  },
];
import CommonList from "@/components/common/common-list.vue";
import LoadMore from "@/components/common/load-more.vue";

export default {
  components: {
    CommonList,
    LoadMore,
  },

  data() {
    return {
      // 默认内容区域
      scrollH: 600,
      tabIndex: 0,
      //   '顶部选项卡'
      scrollInto: "",
      tabBars: [
        {
          name: "关注",
        },
        {
          name: "推荐",
        },
        {
          name: "体育",
        },
        {
          name: "热点",
        },
        {
          name: "财经",
        },
        {
          name: "娱乐",
        },
        {
          name: "军事",
        },
        {
          name: "历史",
        },
        {
          name: "本地",
        },
      ],
      newsList: [],
    };
  },
  // 监听原生标题栏搜索输入框点击事件
  onNavigationBarSearchInputClicked(){
	  uni.navigateTo({
	  	url:'../search/search'
	  })
  },
  // 点击导航栏的buton按钮触发事件
  onNavigationBarButtonTap() {
  	uni.navigateTo({
  		url:'../add-input/add-input'
  	})
  },
  onLoad() {
    // 获取所有的参数 蓝牙等
    uni.getSystemInfo({
      success: (res) => {
        // 实际的内容高度为px=全局的高度-底部tabbar顶部导航栏
        console.log(res);
        // 实际的内容高度-滚动导航栏
        this.scrollH = res.windowHeight - uni.upx2px(100);
      },
    });
    // 根据导航栏选项生成列表
    this.getData();
  },
  methods: {
    getData() {
      var arr = [];
      //   循环多少顶部选项就有多少数据
      for (let i = 0; i < this.tabBars.length; i++) {
        let obj = {
          //2个状态 1上拉加载2更多加载中3没有更多了
          loadmore: "上拉加载更多",
          list: [],
        };
        if (i < 2) {
          obj.list = demo;
        }
        arr.push(obj);
        this.newsList = arr;
      }
    },
    onChangeTab(e) {
      console.log(e.detail.current);
      this.changeTab(e.detail.current);
    },
    //   控制顶部选项卡
    changeTab(index) {
      if (this.tabIndex === index) {
        return;
      }
      this.tabIndex = index;
      this.scrollInto = "tab" + index;
    },
    // 关注
    follow(e) {
      console.log(e);
      let list = (this.newsList[this.tabIndex].list[e].isFollow = true);
      uni.showToast({
        title: "关注成功",
      });
    },
    // 控制点赞踩的事件处理
    doSupport(e) {
      console.log(e.index, e.type);
      let list = this.newsList[this.tabIndex].list;
      let item = list[e.index];
      let msg = e.type === "support" ? "顶" : "踩";
      // 	// 未顶踩
      if (item.support.type === "") {
        // // 增加加踩的数量
        item.support[e.type + "_count"]++;
      }
      // 已经顶 但是你点的踩
      else if (item.support.type === "support" && e.type === "unsupport") {
        // 顶--
        item.support.support_count--;
        item.support.unsupport_count++;
        // 已经踩 但是你点的顶
      } else if (item.support.type === "unsupport" && e.type === "support") {
        // 把踩-1
        item.support.unsupport_count--;
        // 顶+1
        item.support.support_count++;
      }
      // 获取最新的
      item.support.type = e.type;
      uni.showToast({
        title: msg,
      });
    },
    // 上拉加载更多
    loadmore(index) {
      let item = this.newsList[index];
      // 问题1 在请求数据(加载中)反复触发下拉事件会多次请求数据
      if (item.loadmore !== "上拉加载更多") {
        //!== "加载更多"就是正在加载中 什么也不做不可以再次触发下拉事件
        return;
      }
      // 滚动到底部触发上拉加载事件修改为加载中
      item.loadmore = "加载中...";
      // console.log("测试加载中-00000");
      // 2s模拟获取数据之后修改为状态加载更多
      setTimeout(() => {
        item.list = [...item.list, ...item.list];
        item.loadmore = "上拉加载更多";
      }, 4000);
    },
  },
};
</script>

<style>
</style>
